<template>
	<div>
		<el-card class="box-card">
			<el-form ref="personForm" :model="formData" size="medium" label-width="100px">
				<!-- <el-form-item label="头像" prop="avatar">
					
				</el-form-item> -->
				<el-avatar alt="" :src="imgStr" class="avatar"></el-avatar>
				<el-form-item label="编号" prop="code">
					<el-input v-model="formData.code" placeholder="编号" :maxlength="11" readonly :disabled='true'
						prefix-icon='el-icon-user-solid' :style="{width: '100%'}"></el-input>
				</el-form-item>
				<el-form-item label="姓名" prop="name">
					<el-input v-model="formData.name" readonly :disabled='true' prefix-icon='el-icon-user'
						:style="{width: '100%'}"></el-input>
				</el-form-item>
				<el-form-item label="性别" prop="sex">
					<el-input v-model="formData.sex" readonly :disabled='true' prefix-icon='el-icon-female'
						:style="{width: '100%'}"></el-input>
				</el-form-item>
				<el-form-item label="身份" prop="identity">
					<el-input v-model="formData.identity" readonly :disabled='true' prefix-icon='el-icon-s-custom'
						:style="{width: '100%'}"></el-input>
				</el-form-item>
				<el-form-item size="large">
					<el-button type="primary" @click="submitForm">修改邮箱</el-button>
					<el-button @click="resetForm">修改密码</el-button>
					<el-button @click="avatar">修改头像</el-button>
				</el-form-item>
			</el-form>
			<el-dialog title="修改邮箱" :visible.sync="dialogEmailVisible" :append-to-body="true">
				<el-form :model="emailForm" :rules="rules" ref="emailForm">
					<el-form-item label="邮箱" prop="email">
						<el-input v-model="emailForm.email" autocomplete="off"></el-input>
					</el-form-item>
				</el-form>
				<div slot="footer" class="dialog-footer">
					<el-button @click="dialogEmailVisible = false">取 消</el-button>
					<el-button type="primary" @click="changeEmail()">修 改</el-button>
				</div>
			</el-dialog>
			<el-dialog title="修改密码" :visible.sync="dialogPasswordVisible" :append-to-body="true">
				<el-form :model="passwordForm" :rules="rules" ref="passwordForm">
					<el-form-item label="密码" prop="password">
						<el-input v-model="passwordForm.password" autocomplete="off" show-password></el-input>
					</el-form-item>
					<el-form-item label="重复密码" prop="repeatpassword">
						<el-input v-model="passwordForm.repeatPassword" autocomplete="off" show-password></el-input>
					</el-form-item>
				</el-form>
				<div slot="footer" class="dialog-footer">
					<el-button @click="dialogPasswordVisible = false">取 消</el-button>
					<el-button type="primary" @click="changePassword()">修 改</el-button>
				</div>
			</el-dialog>

			<el-dialog title="修改头像" :visible.sync="dialogAvatar" :append-to-body="true">
				<input type="file" name="image" accept="image/*" @change='onchangeImgFun' ref="myfile"
					class="header-upload-btn user-header-com">
				<div slot="footer" class="dialog-footer">
					<el-button @click="cancel()">取 消</el-button>
					<el-button type="primary" @click="uploadAvatar()">修 改</el-button>
				</div>
			</el-dialog>

		</el-card>
	</div>
</template>


<script>
	import {
		getUserInfo,
		verifyEmail,
		changeEmail,
		changePassword,
		avatar,
	} from '../../api/system.js'

	export default {
		name: "Personal",
		data() {
			return {
				formData: {
					id: undefined,
					code: undefined,
					name: undefined,
					sex: undefined,
					identity: undefined,
					email: undefined
				},
				imgStr: '',
				emailForm: {
					email: undefined,
				},
				passwordForm: {
					password: undefined,
					repeatPassword: undefined,
				},
				dialogEmailVisible: false,
				dialogPasswordVisible: false,
				dialogAvatar: false,
				rules: {
					email: [{
						required: true,
						message: '请输入邮箱',
						trigger: 'blur'
					}, {
						pattern: /^([a-zA-Z]|[0-9])(\w|\-)+@[a-zA-Z0-9]+\.([a-zA-Z]{2,4})$/,
						message: '请输入有效邮箱地址',
						trigger: 'blur'
					}],
					password: [{
						required: true,
						message: '请输入密码',
						trigger: 'blur'
					}],
					repeatPassword: [{
						required: true,
						message: '请输入重复密码',
						trigger: 'blur'
					}],
				},
				showImg: false,
			}
		},
		computed: {},
		watch: {},
		mounted() {},
		methods: {
			setData(userinfo) {
				if (userinfo.isok) {
					console.log(userinfo.data1);
					this.name = userinfo.data1.name
					this.code = userinfo.data1.code
					this.email = userinfo.data1.email
				}
			},
			submitForm() {
				this.dialogEmailVisible = true;
				// this.$refs['personForm'].validate(valid => {
				// 	if (!valid) return
				// 	// TODO 提交表单
				// })
			},
			resetForm() {
				this.dialogPasswordVisible = true;
				// this.$refs['personForm'].resetFields()
			},
			avatar() {
				this.dialogAvatar = true;
			},
			changeEmail() {
				this.$refs['emailForm'].validate(valid => {
					if (!valid) return
					verifyEmail(this.emailForm.email).then(res => {
						if (res.isok && res.data1) {
							this.$prompt('请输入验证码', '提示', {
								confirmButtonText: '确定',
								cancelButtonText: '取消',
							}).then(({
								value
							}) => {
								changeEmail(this.emailForm.email, value).then(res => {
									console.log(res);
								})
							}).catch(() => {

							});
						}
					})
				})
				this.dialogEmailVisible = false;
			},
			changePassword() {
				this.$refs['passwordForm'].validate(valid => {
					if (!valid) return
					if (this.passwordForm.password != this.passwordForm.repeatPassword) {
						this.$message('两次密码不一致哦');
						return;
					} else {
						changePassword(this.passwordForm.password).then(res => {
							if (res.data1) {
								this.$message('修改成功');
							}
						})
					}
				})
				this.dialogEmailVisible = false;
			},
			onchangeImgFun() {
				let myfile = this.$refs.myfile;
				let files = myfile.files;
				let file = files[0];
				let imgSize = file.size;
				if (imgSize <= 2 * 1024 * 1024) {

					var reader = new FileReader()
					reader.readAsDataURL(file) // 读出 base64
					reader.onloadend = function() {
						// 图片的 base64 格式, 可以直接当成 img 的 src 属性值
						var dataURL = reader.result
						this.imgStr = dataURL;
						console.log(this.imgStr);
						// 下面逻辑处理
					}
					// var formData = new FormData();
					// formData.append("file", file);
					// avatar(formData,this.formData.id).then(res => {
					// 	myfile.value = '';
					// 	this.$message(res.data1);
					// }).catch(error=>{
					// 	myfile.value = '';
					// 	this.$message("文件格式不对");
					// })
				} else {
					this.$message("图片大小不合适");
				}

			},
			uploadAvatar() {
				let myfile = this.$refs.myfile;
				let files = myfile.files;
				let file = files[0];
				let imgSize = file.size;
				if (imgSize <= 2 * 1024 * 1024) {
					
					var formData1 = new FormData();
					formData1.append("file", file);
					console.log(formData1);
					avatar(formData1,this.formData.id).then(res => {
						myfile.value = '';
						this.dialogAvatar = false;
						this.$message("修改成功！");
					}).catch(error=>{
						myfile.value = '';
						this.$message("文件格式不对");
					})
				} else {
					this.$message("图片大小不合适");
				}
			},
			
			cancel(){
				this.$refs.myfile.value = '';
			}

		},
		created() {
			getUserInfo().then(res => {
				this.formData = res.data1;
				this.emailForm.email = res.data1.email;

				if (this.formData.identity == 0) {
					this.formData.identity = '学生'
				} else if (this.formData.identity == 1) {
					this.formData.identity = '教师'
				} else {
					this.formData.identity = '管理员'
				}
			})
		}
	}
</script>

<style scoped>
	.clearfix:before,
	.clearfix:after {
		display: table;
		content: "";
	}

	.clearfix:after {
		clear: both
	}

	.box-card {
		margin: 20px;


	}

	/* .user-header {
		position: relative;
		left: 50%;
		top: 50%;
		display: inline-block;
	}

	.user-header-com {
		width: 144px;
		height: 144px;
		display: inline-block;
	} */

	/* .header-upload-btn {
		
		position: relative;
		left: 50%;
		top: 50%;
		transform: translate(-50%, -87%);
		opacity: 0;
	} */
</style>
